<template>
	<div id="app">
		<router-view />
	</div>
</template>

<script>
	export default {
		name: 'App',
	}
</script>
<style lang="scss">
	// TODO 手动引入公共CSS文件
	@import url('/skin/day.css');

	// @import url('/skin/night.css');
	@font-face {
		font-family: 'iconfont';
		/* project id 1906267 */
		src: url('//at.alicdn.com/t/font_1906267_6ugrr0p63s2.eot');
		src: url('//at.alicdn.com/t/font_1906267_6ugrr0p63s2.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1906267_6ugrr0p63s2.woff2') format('woff2'),
			url('//at.alicdn.com/t/font_1906267_6ugrr0p63s2.woff') format('woff'), url('//at.alicdn.com/t/font_1906267_6ugrr0p63s2.ttf') format('truetype'),
			url('//at.alicdn.com/t/font_1906267_6ugrr0p63s2.svg#iconfont') format('svg');
	}

	.iconfont {
		font-family: 'iconfont';
		font-size: 16px;
	}

	*,
	*::after,
	*::before {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	body {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		// text-align: center;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		width: 100%;
		height: 100%;
		position: absolute;
		background: var(--app-back-color);
		// min-width: 1200px;
	}

	.main-con {
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.sys-top {
		height: 56px;
		width: 100%;
		line-height: 56px;
	}

	.sys-center {
		display: flex;
		width: 100%;
		height: calc(100% - 56px);
	}

	/*头部信息样式*/
	.head-info-divhover:hover {
		cursor: pointer;
	}

	/*头部菜单的hover*/
	.top-menu-hover:hover {
		color: #5ea9f5;
		cursor: pointer;
	}

	/*tag 样式*/
	.head-tags {
		height: 30px;
		width: 100%;
		display: flex;
		padding: 0 10px;
		margin-bottom: 12px;
		align-items: center;
		padding-left: 0;
	}

	/*页面样式*/
	.pagecontent {
		width: 100%;
		height: calc(100% - 42px);
	}

	/* 遮罩 */
	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.1);
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 中心遮罩
	.maskCenter {
		height: calc(100% - 78px);
		width: calc(100% - 75px);
		position: fixed;
		top: 78px;
		left: 75px;
		bottom: 0;
		background: rgba(0, 0, 0, 0.1);
		// background: rgba(226, 14, 14, 0.1);
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/*页面 分左右2部分的样式*/

	.center-page {
		background: var(--system-bgc);
		width: calc(100% - 75px);
		height: 100%;
		padding: 20px;
		padding-top: 12px;
		margin-left: 75px;
	}

	::-webkit-scrollbar {
		height: 6px;
		width: 6px;
		background: transparent;
	}

	::-webkit-scrollbar-thumb {
		background-color: var(--system-scrollbar-thumb);
		border-radius: 5px;
	}

	.current-row > td {
		background: var(--w-row-hover-color);
		opacity: 0.9;
	}

	.el-button--default {
		color: var(--system-button-text-color) !important;
		border: 1px solid var(--system-button-text-color) !important;
	}

	>>> .el-dialog {
		border-radius: 12px;

		.el-dialog__header {
			border-bottom: 1px solid #f0f0f0;
		}
	}

	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
		-webkit-transition-delay: 99999s;
		-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
	}

	.el-table tbody tr:hover > td {
		background-color: var(--table-row-hover-color) !important;
	}

	/* messageBox 样式 */
	.el-message-box__wrapper > .el-message-box {
		// width: 555px;
		// height: 188px;
		// // background: rgba(255, 255, 255, 0.85);
		// box-shadow: 0px 5px 20px 0px rgba(68, 104, 211, 0.25);
		// border-radius: 4px;
		// position: relative;

		// .el-message-box__header {
		//   height: 47px;
		//   line-height: 47px;
		//   border-bottom: 1px solid rgba(204, 204, 204, 0.6);
		//   font-weight: 400;
		//   color: rgba(0, 0, 0, 1);
		//   padding-left: 30px;
		//   padding-right: 30px;

		//   .el-message-box__headerbtn {
		//     width: 12px;
		//     height: 12px;
		//     color: rgba(102, 102, 102, 1);
		//     top: 50%;
		//     right: 30px;
		//     transform: translateY(-50%);
		//   }
		// }

		// .el-message-box__content {
		//   font-size: 14px;
		//   font-weight: 400;
		//   color: rgba(51, 51, 51, 1);
		//   height: calc(100% - 47px);
		//   padding-left: 30px;
		//   // padding-top: 40px;
		// }

		.el-message-box__btns {
			.el-button--primary {
				color: #fff !important;
			}

			// position: absolute;
			// right: 30px;
			// bottom: 18px;
			// display: inline-flex;
			// flex-direction: row-reverse;
			// padding: 0;

			// button {
			//   width: 68px;
			//   height: 28px;
			//   border: 1px solid rgba(83, 168, 255, 1);
			//   border-radius: 4px;
			//   background-color: rgba(250, 251, 251, 1);
			//   display: inline-flex;
			//   justify-content: center;
			//   align-items: center;
			//   margin-left: 30px;
			//   color: rgba(102, 102, 102, 1);

			//   &:hover,
			//   &:active {
			//     background: rgba(81, 167, 254, 1);
			//     border-radius: 4px;
			//     color: rgba(255, 255, 255, 1);
			//   }
			// }
		}
	}

	/*流程 业务模型  表单定义 工具栏图标样式*/
	.toolbtn {
		color: var(--system-form-text-color);
	}

	/*开关按钮*/
	.systemSwitch .el-switch__core {
		border-color: var(--switch-back-color);
		background-color: var(--switch-back-color);
	}

	.systemSwitch .el-switch.is-checked .el-switch__core {
		border-color: var(--switch-back-checked-color);
		background-color: var(--switch-back-checked-color);
	}

	// /*设置element下拉框 option 选项样式 */
	// .el-select-dropdown__list {
	//   background: var(--select-back-color);
	//   border-radius: 4px;
	// }

	// .el-select-dropdown__item {
	//   background: var(--select-back-color);
	//   color: var(--select-text-color);
	// }

	// .el-select-dropdown__item.selected {
	//   color: var(--select-selected-text-color);
	// }

	// .el-select-dropdown__item:hover {
	//   background: var(--select-hover-back-color);
	//   color: var(--select-hover-text-color);
	// }

	// .el-select-dropdown__item.hover {
	//   background: var(--select-hover-back-color);
	// }

	// /*搜索框样式*el-select-dropdown el-popper myselect*/
	// .el-select-dropdown.el-popper.myselect {
	//   background: var(--page-back-color);
	//   color: var(--page-lable-text-color);
	//   box-shadow: 0px 10px 20px 0px var(--drop-menu-boxshadow-color), 0px -10px 20px 0px var(--drop-menu-boxshadow-color);
	//   border: none;
	// }

	// .myselect .headOption {
	//   color: var(--page-lable-text-color);
	//   background: var(--win-page-back-color);
	// }

	// .myselect .headOption.hover {
	//   background: var(--button-hover-back-color) !important;
	//   color: var(--button-active-text-color) !important;
	// }

	// /*设置空数据*/
	// .el-select-dropdown__empty {
	//   background: var(--select-back-color);
	//   color: var(--select-text-color);
	//   border-radius: 4px;
	// }

	/*设置下拉框边框颜色*/
	.el-select-dropdown {
		border: 1px solid var(--system-form-input-border-color);
		border-radius: 4px;
	}

	/*/设置下拉框距离输入框的距离*/
	.el-popper[x-placement^='bottom'] {
		margin-top: 6px;
	}

	/*设置箭头边的颜色*/
	.el-popper[x-placement^='bottom'] .popper__arrow {
		border-bottom-color: var(--system-form-input-border-color);
	}

	/*设置下拉框箭头颜色*/
	.el-popper[x-placement^='bottom'] .popper__arrow::after {
		border-bottom-color: var(--select-back-color);
	}

	/*数字输入框*/
	.el-input-number {
		width: calc(100% - 2px);
	}

	.el-input-number__decrease.is-disabled,
	.el-input-number__decrease,
	.el-input-number__increase {
		width: 28px;
		color: var(--input-number-icon-text);
		background: var(--input-number-icon-back);
	}

	// 业务模块
	// 一级弹框
	// 业务模块遮罩
	.businessMask {
		height: calc(100% - 78px);
		width: calc(100% - 75px);
		position: fixed;
		top: 78px;
		left: 75px;
		bottom: 0;
		background: rgba(0, 8, 26, 0.8);
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 系统模块通用样式 */

	/*
*	系统模块-新增按钮
*	<span class="systemButtonAdd">新增</span>
*
*	系统模块-编辑按钮
*	<span class="systemButtonEdit">编辑</span>
*
*	系统模块-删除按钮
*	<span class="systemButtonDelete">删除</span>
*
* 	系统模块-不可用按钮
*	<span class="systemButtonDisabled">编辑</span>
*
* 	系统模块-查询&确定&取消&保存按钮
*	<span class="systemButtonQuery">查询</span>
*	<span class="systemButtonConfirm">确定</span>
*	<span class="systemButtonCancel">取消</span>
*/
	.systemButtonAdd,
	.systemButtonEdit,
	.systemButtonDelete,
	.systemButtonQuery,
	.systemButtonConfirm,
	.systemButtonCancel,
	.systemButtonStart,
	.systemButtonSaveIcon,
	.systemButtonCancelIcon {
		white-space: nowrap;
		display: inline-block;
		cursor: pointer;
		height: 28px;
		line-height: 28px;
		padding: 0 16px;
		border: 1px solid var(--system-button-border-color);
		border-radius: 4px;
		color: var(--system-button-text-color);

		&::before {
			font-family: 'iconfont';
			font-size: 1em;
			margin-right: 5px;
		}
	}

	.systemButtonDefault {
		border: 1px solid var(--system-button-border-color) !important;
		color: var(--system-button-text-color) !important;
	}

	.systemButtonAdd::before {
		content: '\e656';
		color: rgba(131, 141, 251, 1);
	}

	.systemButtonEdit::before {
		content: '\e636';
		color: rgba(39, 149, 253, 1);
	}

	.systemButtonDelete::before {
		content: '\e63e';
		color: rgba(249, 73, 99, 1);
	}

	.systemButtonStart::before {
		content: '\e68f';
		color: rgba(39, 149, 253, 1);
	}

	.systemButtonSaveIcon::before {
		content: '\e634';
		color: rgba(39, 149, 253, 1);
	}

	.systemButtonCancelIcon::before {
		content: '\e6fd';
		color: rgba(39, 149, 253, 1);
	}

	.systemButtonAdd:hover,
	.systemButtonAdd:active,
	.systemButtonEdit:hover,
	.systemButtonEdit:active,
	.systemButtonDelete:hover,
	.systemButtonDelete:active,
	.systemButtonQuery:hover,
	.systemButtonQuery:active,
	.systemButtonConfirm:hover,
	.systemButtonConfirm:active,
	.systemButtonSaveIcon:hover,
	.systemButtonSaveIcon:active,
	.systemButtonCancelIcon:hover,
	.systemButtonCancelIcon:active,
	.systemButtonCancel:hover,
	.systemButtonCancel:active,
	.systemButtonStart:hover,
	.systemButtonStart:active {
		background-color: rgba(83, 168, 255, 1);
		border: 1px solid rgba(83, 168, 255, 1);
		color: rgba(255, 255, 255, 1);
		opacity: 0.6;

		&::before {
			color: rgba(255, 255, 255, 1);
		}
	}

	.systemButtonDelete:hover,
	.systemButtonDelete:active {
		background-color: rgba(249, 73, 99, 1);
		border: 1px solid rgba(249, 73, 99, 1);
	}

	.systemButtonAdd:active,
	.systemButtonEdit:active,
	.systemButtonDelete:active,
	.systemButtonQuery:active,
	.systemButtonConfirm:active,
	.systemButtonCancel:active,
	.systemButtonEnable:active,
	.systemButtonSaveIcon:active,
	.systemButtonCancelIcon:active {
		opacity: 0.9;
	}

	.systemButtonDisabled,
	.systemButtonDisabled:hover,
	.systemButtonDisabled:active {
		background-color: rgba(214, 221, 228, 1);
		color: var(--button-disable-text-color);
		border: 1px solid rgba(214, 221, 228, 1);
		opacity: 1;
		cursor: not-allowed;

		&::before {
			color: var(--button-disable-text-color);
		}
	}

	/* 系统页面-头部 */
	.systemPage-wrapper {
		height: 100%;

		.topbar {
			height: 56px;
			line-height: 56px;
			background: var(--system-page-topbar-bgc);
			border-radius: 6px;
			margin-bottom: 12px;
			display: flex;
			justify-content: left;
			align-items: center;
		}

		.topbar .iconfont {
			font-size: 24px;
			margin: 0px 14px 0px 20px;
			color: rgba(83, 168, 255, 1);
		}

		.topbar span {
			font-size: 18px;
			font-family: Microsoft YaHei;
			color: var(--system-page-topbar-text-color);
		}

		.content-background {
			background: var(--system-page-content-wrapper-bgc);
			box-shadow: 0px 10px 20px 0px rgba(204, 204, 204, 0.1);
			border-radius: 6px;
			padding: 12px;
			height: calc(100% - 68px);
		}

		.content-wrapper {
			height: 100%;
			border-radius: 6px;
			display: flex;
			flex-direction: column;
			background: var(--system-page-content-bgc);
			border: 1px solid var(--system-page-content-border-color);
		}

		.searches-wrapper {
			height: 72px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: rgba(255, 255, 255, 1);
			width: calc(100% - 44px);
			overflow-x: auto;
			margin: 0 22px;
			background: var(--searches-wrapper-color);
		}

		.searches-wrapper .buttons-wrapper {
			display: flex;
		}

		.searches-wrapper .buttons-wrapper span {
			margin-right: 10px;
		}

		.query-wrapper {
			display: flex;
			align-items: center;
		}

		.query-box {
			display: flex;
			flex-direction: row;
			margin-left: 32px;

			&.systemButtonQuery {
				margin-left: 20px;
			}

			.span-name {
				height: 32px;
				line-height: 32px;
				margin-right: 17px;
				white-space: nowrap;
			}

			.el-input {
				width: 140px;
				height: 32px;

				.el-input__inner {
					height: 32px;
					border: 1px solid var(--el-input-border-color);
					background: var(--el-input-background-color);
				}
			}

			.el-input__icon {
				line-height: 32px;
			}

			.el-button {
				height: 32px;
				padding: 0 16px !important;
			}

			.el-input__inner {
				height: 32px !important;
				line-height: 32px !important;
			}
		}
	}

	/*
*	系统模块-表格
*	<el-table class="systemTable"></el-table>
*/
	.systemTable,
	.systemTable::before {
		background-color: transparent;
	}

	.systemTable .el-table__header tr,
	.systemTable .el-table__header th {
		padding: 0;
		height: 40px;
		line-height: 40px;
		background-color: var(--system-table-header-bgc) !important;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: var(--system-table-text-color);
		border-bottom: none;
	}

	.systemTable .el-table__body-wrapper {
		background-color: transparent;
		overflow: auto;
	}

	.systemTable .el-table__body-wrapper tr td {
		//border: none;
	}

	/*奇数行颜色*/
	.systemTable.el-table td {
		background: var(--table-row-odd-back-color) !important;
	}

	/*偶数行颜色*/
	.systemTable.el-table--striped .el-table__body tr.el-table__row--striped td {
		background: var(--table-row-even-back-color) !important;
	}

	.systemTable .el-table__body-wrapper tr:hover {
		background-color: var(--table-row-hover-color);
	}

	.systemTable .el-table__body-wrapper tr:hover td,
	.systemTable.el-table--striped .el-table__body tr.el-table__row--striped:hover td {
		background-color: var(--table-row-hover-color) !important;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	// 选中行
	.systemTable .el-table__body-wrapper tr.checkedRow td,
	.systemTable.el-table--striped .el-table__body tr.el-table__row--striped.checkedRow td {
		background-color: var(--table-row-hover-color) !important;
	}

	.systemTable .el-table__body-wrapper td {
		height: 40px;
		line-height: 40px;
		padding: 0;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.systemTable .el-table__fixed-body-wrapper td {
		height: 40px;
		line-height: 40px;
		padding: 0;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.systemTable .cell {
		color: var(--table-text-color);
	}

	.systemTable.el-table th > .cell {
		border-left: 1px solid rgba(204, 204, 204, 1);
	}

	.systemTable.el-table th:first-child > .cell {
		border-left: 1px solid var(--system-table-header-bgc);
	}

	.systemTable {
		// 头部
		.el-table__header tr {
			.el-table-column--selection .cell {
				padding-left: 14px;
				padding-right: 14px;
			}
		}
	}

	.systemTable .el-checkbox__inner {
		width: 14px;
		height: 14px;
		background: rgba(238, 238, 238, 1);
		border: 1px solid rgba(204, 204, 204, 1);
		border-radius: 4px;
	}

	.systemTable .el-table__body-wrapper tr:hover .el-checkbox__inner {
		width: 14px;
		height: 14px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(29, 191, 206, 1);
		border-radius: 4px;
	}

	.systemTable .el-checkbox__input.is-checked .el-checkbox__inner {
		width: 14px;
		height: 14px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(29, 191, 206, 1);
		border-radius: 4px;
		padding: 0;
	}

	.systemTable .is-focus .el-checkbox__inner {
		border: 1px solid rgba(29, 191, 206, 1);
	}

	.systemTable .is-indeterminate .el-checkbox__inner {
		border: 1px solid rgba(29, 191, 206, 1);
		background-color: rgba(29, 191, 206, 1);
	}

	.systemTable .el-checkbox__input.is-checked .el-checkbox__inner::after {
		width: 10px;
		height: 10px;
		left: 0;
		top: 1px;
		background-color: rgba(29, 191, 206, 1);
		border-radius: 4px;
		transform: rotate(90deg);
	}

	/*
*	系统模块-页码
*	<el-pagination
*		class="systemPagination"
*		layout="sizes,slot, prev, pager, next, jumper"
*	>
*		<span class="totalCount">从{{start}}到{{end}}/共{{totalCount}}条数据</span>
*	</el-pagination>
*/
	.systemPagination {
		margin-top: 10px;
		text-align: right;
	}

	.systemPagination,
	.systemPagination .el-pagination__total,
	.systemPagination .el-pager li.more,
	.systemPagination .el-pagination__jump {
		color: var(--page-lable-text-color) !important;
	}

	.systemPagination .el-pagination__sizes {
		margin-right: 5px;
	}

	.systemPagination .el-pagination__sizes input {
		border: 1px solid var(--page-lable-text-color);
		border-radius: 4px;
		color: var(--page-lable-text-color);
	}

	.systemPagination .btn-prev,
	.systemPagination .btn-next {
		border: 1px solid var(--page-lable-text-color);
		border-radius: 4px;
		color: var(--page-lable-text-color) !important;
	}

	.systemPagination .btn-next {
		margin-left: 6px !important;
	}

	.systemPagination .el-pager li {
		border: 1px solid var(--page-lable-text-color);
		margin-left: 6px;
		border-radius: 4px;
	}

	.systemPagination .el-pager li.active {
		background-color: var(--page-lable-text-color) !important;
		color: #ffffff;
	}

	.systemPagination .el-pager li.active + li {
		border: 1px solid var(--page-lable-text-color);
	}

	.systemPagination .el-pagination__jump input {
		border: 1px solid var(--page-lable-text-color);
		border-radius: 4px;
		color: var(--page-lable-text-color);
	}

	/*
*	系统模块-表单
*	<el-form class="systemForm"></el-form>
*/
	.systemForm .el-form-item {
		height: 32px;
		line-height: 32px;
		margin-bottom: 12px;
		position: relative;

		.el-form-item__label {
			height: 32px;
			line-height: 32px;
			// color: var(--system-form-text-color);
		}

		.el-form-item__content {
			height: 32px;
			line-height: 32px;

			.el-input {
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}

	.queryForm {
		.el-form-item {
			margin-bottom: 4px !important;
		}
	}

	/*
*	系统模块-输入框
*	<el-input class="systemInput"></el-input>
*
*	系统模块-下拉框
*	<el-select class="systemInput"></el-select>
*
*	系统模块-不可用输入框
*	<el-input class="systemInput disabled"></el-input>
*/
	.systemInput input,
	.systemInput textarea {
		background-color: transparent !important;
		border: 1px solid var(--system-form-input-border-color) !important;
		color: var(--system-form-text-color) !important;
		border-radius: 4px !important;

		&:hover {
			background: var(--input-hover-back-color) !important;
			border: 1px solid var(--input-focus-border-color) !important;
			box-shadow: var(--input-shadow) !important;
		}

		&:focus {
			background: var(--input-focus-back-color) !important;
			border: 1px solid var(--input-focus-border-color) !important;
		}

		&:disable {
			background: var(--system-form-input-disabled-bgc) !important;
			border: 1px solid var(--system-form-input-disabled-border-color) !important;
			color: rgba(153, 153, 153, 1) !important;
		}
	}

	.systemInput input {
		height: 32px;
	}

	.el-textarea.is-disabled .el-textarea__inner {
		color: rgba(153, 153, 153, 1) !important;
		font-size: 12px;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
	}

	.systemInput.is-disabled input,
	.systemInput .is-disabled input {
		color: rgba(153, 153, 153, 1) !important;

		&:hover {
			box-shadow: none !important;
			border: 1px solid var(--system-form-input-border-color) !important;
		}
	}

	.systemInput {
		position: relative;

		.el-input-group__append {
			background-color: transparent;
			border: none;
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	/*
*	系统模块-时间选择器
* <el-date-picker class="systemDatePicker"></el-date-picker>
*/
	.systemDatePicker {
		background-color: transparent !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;

		input {
			background-color: transparent !important;
			color: var(--system-form-text-color) !important;
			border-radius: 4px !important;
		}

		i,
		.el-range-separator {
			color: var(--system-form-text-color) !important;
		}
	}

	/*
*	系统模块-自定义标签 tab
*	<div class="systemTabs">
*		<span class="active">选中</span>
*		<span>未选中</span>
*		<span>其他选项</span>
*	</div>
*
*	系统模块-element标签 tab
*	<el-tabs class="systemElTabs"></el-tabs>
*/
	.systemTabs {
		display: inline-flex;
		height: 28px;
		line-height: 28px;
		border: 1px solid var(--system-tabs-active-bgc);
		border-radius: 4px;

		span {
			padding: 0 12px;
			cursor: pointer;
			border-left: 1px solid var(--system-tabs-active-bgc);
			color: var(--system-tabs-text-color);

			&:first-child {
				border-left: none;
			}

			&.active {
				background: var(--system-tabs-active-bgc);
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	.systemElTabs .el-tabs__nav-wrap {
		.el-tabs__active-bar {
			background: var(--system-tabs-active-bgc);
		}

		.el-tabs__item {
			color: var(--system-tabs-text-color);

			&.is-active {
				color: var(--system-tabs-active-bgc);
			}
		}

		&::after {
			height: 1px;
			background: rgba(160, 160, 160, 1);
		}
	}

	/*
*	系统模块-勾选框
*	<el-checkbox class="systemCheckbox"></el-checkbox>
*/
	.systemCheckbox {
		font-weight: 400;
		color: var(--system-checkbox-text-color);

		.el-checkbox__inner {
			width: 14px;
			height: 14px;
			background: rgba(238, 238, 238, 1);
			border: 1px solid var(--system-checkbox-border-color);
			border-radius: 4px;

			&:hover {
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(29, 191, 206, 1);
			}
		}

		&.is-checked {
			.el-checkbox__label {
				color: var(--system-checkbox-text-color);
			}

			.el-checkbox__inner {
				width: 14px;
				height: 14px;
				background: var(--system-checkbox-bgc);
				border: 1px solid rgba(29, 191, 206, 1);
				border-radius: 4px;
				padding: 0;

				&::after {
					width: 10px;
					height: 10px;
					left: 0;
					top: 1px;
					background-color: rgba(29, 191, 206, 1);
					border-radius: 4px;
					transform: rotate(90deg);
				}
			}
		}

		.is-focus .el-checkbox__inner {
			border: 1px solid rgba(29, 191, 206, 1);
		}
	}

	/*
*	系统模块-弹窗
*	<div class="maskCenter"> // 遮罩
*		<div class="systemDialog" style="width: 473px;height: 400px;"> // 宽高自己写
*			<div class="dialog-header">
*				<span>弹窗标题</span>
*				<span class="icon iconfont iconbiaoqianlan-guanbi"></span>
*			</div>
*	    	<div class="dialog-body"></div>
*	    	<div class="dialog-footer right"></div> // 底部按钮区可不写;right-按钮在右边，默认居中
*		</div>
*	</div>
*/
	.systemDialog {
		position: fixed;
		margin: auto;
		background: var(--system-dialog-bgc);
		//修改背景色为白色
		// background:white;

		box-shadow: var(--system-dialog-boxshadow);
		border-radius: 4px;
		overflow: hidden;
		animation: myscale 0.4s;

		.dialog-header {
			height: 40px;
			line-height: 40px;
			width: calc(100% - 8px);
			background: var(--system-dialog-title-bgc);
			margin: 4px;
			margin-bottom: 0;
			padding-left: 10px;
			display: inline-flex;
			justify-content: space-between;
			align-items: center;
			font-size: 16px;
			font-weight: 400;
			color: var(--system-dialog-title-color);
			position: relative;

			.icon {
				cursor: pointer;
				float: right;
				margin-right: 8px;
				//  position: absolute;
				//  right: 8px;
				//  top: 50%;
				//  transform: translateY(-50%);
			}
		}

		.dialog-body {
			height: calc(100% - 92px);
			padding: 12px 16px;
			overflow: auto;
		}

		.dialog-footer {
			height: 48px;

			span {
				margin-left: 20px;
			}

			&.right {
				text-align: right;
				padding-right: 16px;
			}
		}
	}

	.systemDialog-hide {
		position: fixed;
		margin: auto;
		background: var(--system-dialog-bgc);
		box-shadow: var(--system-dialog-boxshadow);
		border-radius: 4px;
		overflow: hidden;
		animation: myscalehide 0.4s;
		transform: scale(0.6);
		opacity: 0;
	}

	/*表单打开动画*/
	@keyframes myscale {
		0% {
			opacity: 0;
			transform: scale(0.6);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes myscalehide {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(0.6);
		}
	}

	/*
*	系统模块-时间选择器
*	组织机构模块使用，在 body 外层无法选择
*/
	.el-picker-panel {
		&.organizationDatePicker {
			transform: translateX(-10%);
		}

		&.logDatePicker {
			transform: translateX(15%);
		}
	}

	/* 业务模块通用样式 */
	.businessPage-wrapper,
	.businessMask .businessDialog .dialog-body .businessPage-wrapper {
		width: 100%;
		height: calc(100% - 42px);

		// 头部区域
		.businessTopbar,
		.windowTopbar {
			width: 100%;
			margin-bottom: 8px;
			background: var(--business-page-topbar-bgc);
			border-radius: 4px;
			display: inline-flex;
			flex-direction: column;
			box-shadow: 0px -2px 0px 0px var(--business-page-topbar-boxshadow-top);
			position: relative;

			// 头部（上）-标题，图标
			.businessTitle-wrapper {
				height: 56px;
				width: 100%;
				padding: 0 16px;
				display: inline-flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 4px 4px 0px 0px;
				box-shadow: 0px 1px 0px 0px var(--business-page-topbar-boxshadow-bottom);

				.businessTitle-left {
					font-size: 18px;
					font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
					font-weight: bold;
					color: var(--business-page-topbar-title-color);
					height: 56px;
					line-height: 56px;

					.icon {
						margin-right: 16px;
						font-size: 20px;
					}
				}

				.businessTitle-right {
					display: inline-flex;

					.flow-wrapper {
						margin-right: 32px;
						display: inline-flex;

						div {
							margin-left: 16px;
						}
					}
				}
			}

			// 头部（下）-检索区
			.windowSearches,
			.businessSearches-wrapper {
				min-height: 65px;
				padding: 0 16px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				overflow: auto;
				position: relative;

				.businessSearches-left {
					padding-top: 16px;
					padding-bottom: 16px;
					display: inline-flex;
					flex-wrap: wrap;
					width: calc(100% - 232px);

					.businessSearchCondition {
						flex-shrink: 0;
						margin-right: 12px;

						&.hidden {
							visibility: hidden;
							display: none;
						}
					}

					.moreConditionsLabel {
						width: 82px;
						text-align: center;
						border: 1px solid #dce2e6;
						cursor: pointer;
						position: relative;

						&::before {
							position: absolute;
							content: '\e6a9';
							font-family: 'iconfont';
							font-size: 16px;
							color: rgba(147, 151, 153, 1);
							right: 9px;
						}
					}

					hr {
						flex: 1;
						display: block;
						border: none;
					}

					.moreConditions {
						text-align: left;

						.businessSearchCondition {
							margin-right: 12px;
							margin-top: 12px;
						}
					}
				}

				.businessSearches-right {
					position: absolute;
					top: 16px;
					right: 16px;
					display: inline-flex;

					span:last-child {
						margin-left: 12px;
					}
				}
			}

			img {
				position: absolute;
				bottom: 0;
				transform: translateY(50%);

				&.imgBefore {
					left: 42px;
				}

				&.imgAfter {
					right: 42px;
				}
			}
		}

		.businessWindowTopbar {
			box-shadow: none;
		}

		// 内容区
		.businessContent-wrapper {
			background: var(--business-page-content-bgc);
			box-shadow: 0px -2px 0px 0px var(--business-page-content-boxshadow);
			border-radius: 4px;

			// 按钮区
			.businessButtons-wrapper {
				height: 64px;
				padding-left: 16px;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				span {
					margin-right: 8px;
				}
			}
		}
	}

	/*
*	业务模块-检索条件
*	<div class="businessSearch">
*		<label>label</label>
*       <el-input></el-input>
*	</div>
*/
	.businessSearchCondition {
		display: inline-flex;
		font-size: 12px;
		height: 32px;
		align-items: center;
		background: var(--business-condition-bgc);
		border-radius: 4px;
		border: 1px solid var(--business-condition-bgc);
		padding-left: 8px;

		label {
			white-space: nowrap;
			color: var(--business-condition-label-color);
		}

		.businessConditionInput.el-input,
		.el-input,
		.businessConditionInput .el-input {
			margin-right: 0 !important;
			text-align: left;

			i {
				height: 32px;
				line-height: 32px;
			}

			input {
				border: none;
				background-color: transparent;
				height: 32px !important;
				line-height: 32px !important;
				color: var(--business-condition-input-text-color);
				font-size: 12px;
				font-family: MicrosoftYaHei;
			}
		}

		.my-select {
			margin-right: 0 !important;

			.el-select {
				width: 100%;
			}
		}

		.el-textarea__inner {
			border: none;
			padding-left: 0;
			background-color: transparent;
			color: rgba(0, 8, 26, 1);
			font-size: 12px;
		}

		&:hover {
			border: 1px solid var(--business-condition-hover-border-color);
		}

		.is-disabled input {
			background: transparent !important;
		}
	}

	/*
*	业务模块-按钮（图标文字两行显示）
*  <div class="businessButtonInline">
*     <span class="businessButtonAdd"></span>
*     <span>新增</span>
*    </div>
*/
	.businessButtonInline {
		display: inline-flex;
		flex-direction: column;

		span:first-child {
			width: 56px;
			height: 24px;
			line-height: 24px;
			margin-bottom: 4px;
		}

		span:last-child {
			font-size: 12px;
			color: var(--business-buttonInline-text-color);
		}
	}

	/*
*	业务模块-新增按钮
*	<span class="businessButtonAdd">新增</span>
*
*	业务模块-编辑按钮
*	<span class="businessButtonEdit">编辑</span>
*
*	业务模块-导入按钮
*	<span class="businessButtonImport">导入</span>
*
*	业务模块-导出按钮
*	<span class="businessButtonExport">导出</span>
*
*	业务模块-导出按钮
*	<span class="businessButtonDownload">下载</span>
*
*	业务模块-查看流程按钮
*	<span class="businessButtonViewFlow">下载</span>
*
*	业务模块-有图标不可用按钮
*	<span class="businessButtonDisabled">按钮</span>
*/
	.businessButtonAdd,
	.businessButtonEdit,
	.businessButtonImport,
	.businessButtonExport,
	.businessButtonDownload,
	.businessButtonViewFlow,
	.businessButtonCustom {
		display: inline-block;
		height: 32px;
		line-height: 32px;
		padding: 0 16px;
		background: var(--business-button-bgc);
		border-radius: 4px;
		color: rgba(0, 128, 255, 1);
		font-family: MicrosoftYaHei;
		cursor: pointer;

		&:hover {
			background: var(--business-button-hover-bgc);
			border-radius: 4px;
			color: rgba(0, 128, 255, 1);
		}

		&:active {
			opacity: 0.6;
		}
	}

	.businessButtonAdd::before {
		font-family: 'iconfont';
		content: '\e6a8';
		font-size: 1em;
	}

	.businessButtonEdit::before {
		font-family: 'iconfont';
		content: '\e696';
		font-size: 16px;
	}

	.businessButtonImport::before {
		font-family: 'iconfont';
		content: '\e6a1';
		font-size: 16px;
	}

	.businessButtonExport::before {
		font-family: 'iconfont';
		content: '\e6ac';
		font-size: 16px;
	}

	.businessButtonDownload::before {
		font-family: 'iconfont';
		content: '\e6ad';
		font-size: 16px;
	}

	.businessButtonViewFlow::before {
		font-family: 'iconfont';
		content: '\e6a6';
		font-size: 16px;
	}

	/*
*	业务模块-删除按钮
*	<span class="businessButtonDelete">删除</span>
*/
	.businessButtonDelete {
		display: inline-block;
		padding: 0 16px;
		height: 32px;
		line-height: 32px;
		background: var(--business-button-delete-bgc);
		border-radius: 4px;
		color: var(--business-button-delete-text-color);
		cursor: pointer;

		&::before {
			font-family: 'iconfont';
			content: '\e6a0';
			font-size: 1em;
		}

		&:hover {
			background: rgba(255, 51, 51, 0.2);
		}

		&:active {
			opacity: 0.6;
		}
	}

	/*
*	业务模块-不可用按钮（有图标）
*	<span class="businessButtonDisabled">随便你写什么东西吧</span>
*/
	.businessButtonDisabled,
	.businessButtonDisabled:hover,
	.businessButtonDisabled:active {
		background: var(--business-button-disabled-bgc);
		color: var(--business-button-disabled-text-color);
		cursor: not-allowed;
		box-shadow: none;
		opacity: 1;
	}

	/*
*   业务模块-无图标蓝色按钮
*	<span class="businessButtonConfirm">确定/保存/查询</span>
*
*   业务模块-无图标灰色按钮
*	<span class="businessButtonCancel">取消/清除</span>
*
*   业务模块-无图标不可用按钮
*	<span class="businessButtonCancel disabled">不可用</span>
*/
	.businessButtonConfirm,
	.businessButtonCancel {
		white-space: nowrap;
		display: inline-block;
		height: 32px;
		line-height: 32px;
		padding: 0 28px;
		border-radius: 4px;
		cursor: pointer;
		font-size: 12px;
		font-family: MicrosoftYaHei;
	}

	.businessButtonConfirm {
		background: rgba(0, 128, 255, 1);
		box-shadow: var(--business-button-confirm-boxshadow);
		color: var(--business-button-confirm-text-color);

		&:hover {
			background: rgba(51, 153, 255, 1);
		}

		&:active {
			background: rgba(0, 102, 204, 1);
		}

		&.disabled,
		&.disabled:hover,
		&.disabled:active {
			cursor: not-allowed;
			opacity: 0.4;
			background: var(--business-button-confirm-disabled-bgc);
		}
	}

	.businessButtonCancel {
		background: var(--business-button-cancel-bgc);
		color: var(--business-button-cancel-text-color);

		&:hover {
			color: var(--business-button-cancel-hover-text-color);
			background: var(--business-button-cancel-hover-bgc);
		}

		&:active {
			color: var(--business-button-cancel-active-text-color);
			background: var(--business-button-cancel-active-bgc);
		}

		&.disabled,
		&.disabled:hover,
		&.disabled:active {
			cursor: not-allowed;
			background: var(--business-button-cancel-disabled-bgc);
			color: var(--business-button-cancel-disabled-text-color);
		}
	}

	/*
*	业务模块-流程按钮-未上报
*	<div class="businessButtonFlow_unreported">
*		<span>24</span>
*		<span>未上报</span>
*	</div>
*
*	业务模块-流程按钮-流程中
*	<div class="businessButtonFlow_flowing">
*		<span>1240</span>
*		<span>流程中</span>
*	</div>
*
*	业务模块-流程按钮-已完成
*	<div class="businessButtonFlow_completed">
*		<span>1</span>
*		<span>已完成</span>
*	</div>
*
*	业务模块-流程按钮-已作废
*	<div class="businessButtonFlow_invalid">
*		<span>2</span>
*		<span>已作废</span>
*	</div>
*/

	.businessButtonFlow_unreported,
	.businessButtonFlow_flowing,
	.businessButtonFlow_completed,
	.businessButtonFlow_invalid {
		height: 32px;
		display: inline-flex;
		align-items: center;
		background: var(--business-flowButton-unreported-bgc);
		border-radius: 16px;
		border: 1px solid transparent;
		cursor: pointer;

		span {
			height: 32px;
			line-height: 32px;

			&:first-child {
				background: rgba(255, 170, 0, 1);
				box-shadow: var(--business-flowButton-unreported-boxshadow);
				border-radius: 16px;
				padding: 0 12px;
				font-size: 16px;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
			}

			&:last-child {
				padding-left: 8px;
				padding-right: 12px;
				font-size: 12px;
				font-family: MicrosoftYaHei;
				color: rgba(255, 170, 0, 1);
				height: 30px;
				white-space: nowrap;
			}
		}

		&:hover {
			border: 1px solid rgba(255, 170, 0, 0.3);
		}

		// &:active {
		//   box-shadow: var(--business-flowButton-unreported-boxshadow);
		//   background: rgba(255, 170, 0, 1);
		//   flex-direction: row-reverse;

		//   span {
		//     box-shadow: 0 !important;
		//     color: rgba(255, 255, 255, 1) !important;
		//   }
		// }
	}

	.businessButtonFlow_flowing {
		background: var(--business-flowButton-flowing-bgc);

		span {
			&:first-child {
				background: rgba(0, 128, 255, 1);
				box-shadow: var(--business-flowButton-flowing-boxshadow);
			}

			&:last-child {
				color: rgba(0, 128, 255, 1);
			}
		}

		&:hover {
			border: 1px solid rgba(0, 128, 255, 0.3);
		}

		// &:active {
		//   box-shadow: var(--business-flowButton-flowing-boxshadow);
		//   background: rgba(0, 128, 255, 1);
		// }
	}

	.businessButtonFlow_completed {
		background: var(--business-flowButton-completed-bgc);

		span {
			&:first-child {
				background: rgba(82, 204, 20, 1);
				box-shadow: var(--business-flowButton-completed-boxshadow);
			}

			&:last-child {
				color: rgba(82, 204, 20, 1);
			}
		}

		&:hover {
			border: 1px solid rgba(82, 204, 20, 0.3);
		}

		// &:active {
		//   box-shadow: var(--business-flowButton-completed-boxshadow);
		//   background: rgba(82, 204, 20, 1);
		// }
	}

	.businessButtonFlow_invalid {
		background: var(--business-flowButton-invalid-bgc);

		span {
			&:first-child {
				background: rgba(147, 149, 153, 1);
				box-shadow: var(--business-flowButton-invalid-boxshadow);
			}

			&:last-child {
				color: rgba(147, 149, 153, 1);
			}
		}

		&:hover {
			border: 1px solid rgba(147, 149, 153, 0.3);
		}

		// &:active {
		//   box-shadow: var(--business-flowButton-invalid-boxshadow);
		//   background: rgba(147, 149, 153, 1);
		// }
	}

	/*
*	业务模块-页码
*	<el-pagination
*    	class="businessPagination"
*	 	layout="total, sizes, prev, pager, next, jumper"
*	 >
*	 </el-pagination>
*/
	.businessPagination {
		height: 56px;
		display: inline-flex;
		width: 100%;
		align-items: center;
		justify-content: flex-end;
		padding: 0 16px;
		position: relative;

		.el-pagination__total {
			position: absolute;
			left: 16px;
			color: var(--business-pagination-total-text-color);
		}
	}

	.businessPagination .businessPagination .el-pagination__sizes {
		height: 32px !important;
		line-height: 32px !important;
	}

	.businessPagination .el-pagination__sizes .el-select .el-input input {
		height: 32px;
		line-height: 32px;
		background: var(--business-pagination-button-bgc);
		border-radius: 4px;
		border: 1px solid var(--business-pagination-button-border-color);
		color: var(--business-pagination-button-text-color);
	}

	.businessPagination .btn-prev,
	.businessPagination .btn-next,
	.businessPagination .el-pager li {
		width: 32px;
		height: 32px;
		background: var(--business-pagination-button-bgc) !important;
		border-radius: 4px !important;
		border: 1px solid var(--business-pagination-button-border-color) !important;
	}

	.businessPagination .el-pager li {
		margin: 0 !important;
		border-radius: 0 !important;
		margin-left: -1px !important;
		height: 32px !important;
		line-height: 32px !important;
	}

	.businessPagination .el-pager li:first-child {
		border-radius: 4px 0px 0px 4px !important;
	}

	.businessPagination .el-pager li:last-child {
		border-radius: 0px 4px 4px 0px !important;
	}

	.businessPagination .el-pager li.active {
		background: rgba(0, 128, 255, 1) !important;
		box-shadow: 0px 2px 4px 0px rgba(0, 128, 255, 0.4);
		border-radius: 4px !important;
		border: none !important;
	}

	.businessPagination .el-pagination__jump,
	.businessPagination .el-pagination__jump .el-input,
	.businessPagination .el-pagination__jump .el-input input {
		height: 32px !important;
		line-height: 32px !important;
	}

	.businessPagination .el-pagination__jump {
		color: var(--business-pagination-total-text-color);
		margin-left: 8px !important;
	}

	/*
*	业务模块-表格
*	<el-table class="businessTable"></el-table>
*/
	.businessTable {
		background: transparent;

		&::before {
			background-color: var(--business-table-bottom-border-color);
		}

		// 头部
		.el-table__header tr,
		.el-table__header th {
			padding: 0;
			height: 40px;
			background-color: var(--business-table-header-bgc);
			border: none;
			border-bottom: var(--business-table-header-boder-bottom);
			border-top: var(--business-table-header-boder-top);

			.cell {
				font-size: 12px;
				font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
				font-weight: bold;
				color: var(--business-table-header-text-color);

				.el-checkbox {
					.el-checkbox__inner {
						border-radius: 2px;
						border: 1px solid var(--business-checkbox-border-color);
						background-color: var(--business-checkbox-bgc);
					}

					&.is-checked,
					.is-indeterminate {
						.el-checkbox__inner {
							background-color: rgba(0, 128, 255, 1);
							border: 1px solid rgba(0, 128, 255, 1);
						}
					}
				}
			}

			.el-table-column--selection .cell {
				padding-left: 17px;
			}
		}

		.el-table__body tr {
			background: transparent;

			td {
				padding: 0;
				height: 40px !important;
				background-color: transparent !important;
				box-shadow: 0px 1px 0px 0px var(--business-table-row-boxshadow);
				border: none;

				.cell {
					height: 16px;
					font-size: 12px;
					font-family: MicrosoftYaHei;
					color: var(--business-table-text-color);
					line-height: 16px;

					.el-checkbox {
						.el-checkbox__inner {
							border-radius: 2px;
							border: 1px solid var(--business-checkbox-border-color);
							background-color: var(--business-checkbox-bgc);
						}

						&.is-checked {
							.el-checkbox__inner {
								background-color: rgba(0, 128, 255, 1);
								border: 1px solid rgba(0, 128, 255, 1);
							}
						}
					}
				}
			}

			.el-table-column--selection .cell {
				padding-left: 17px;
			}
		}
	}

	/*
*	业务模块-弹窗
*	<div class="businessMask"> // 遮罩
*		<div class="businessDialog large/middle/small"> // 大中小尺寸
*			<div class="dialog-header">
*				<span>弹窗标题</span>
*				<span class="icon iconfont iconbiaoqianlan-guanbi"></span>
*			</div>
*	    	<div class="dialog-body"></div>
*	    	<div class="dialog-footer right"></div> // 底部按钮区可不写;right-按钮在右边，默认居中
*		</div>
*	</div>
*/
	.businessDialog {
		position: absolute;
		margin: auto;
		background: var(--business-dialog-bgc);
		box-shadow: 0px -4px 0px 0px rgba(0, 128, 255, 1);
		border-radius: 4px;
		overflow: hidden;
		animation: myscale 0.4s;

		&.large {
			width: 904px;
			height: 600px;
		}

		&.middle {
			width: 456px;
			height: 342px;
		}

		&.small {
			width: 360px;
			height: 180px;
		}

		.dialog-header {
			height: 48px;
			line-height: 48px;
			width: 100% !important;
			padding: 0 17px;
			background: var(--business-dialog-header-bgc);
			border-radius: 4px 4px 0px 0px;
			font-size: 16px;
			font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
			font-weight: bold;
			color: var(--business-dialog-header-text-color);

			span {
				float: left;
			}

			.icon {
				cursor: pointer;
				float: right;
			}
		}

		.dialog-body {
			height: calc(100% - 96px);
			overflow: auto;
			padding: 16px;

			.buttons-wrapper {
				// 按钮区
				width: 100%;
				height: 56px;
				margin-bottom: 16px;
				display: inline-flex;
				justify-content: flex-start;
				align-items: center;
				box-shadow: 0px 1px 0px 0px rgba(245, 248, 250, 1);
			}
		}

		.dialog-footer {
			height: 48px;

			span {
				margin-left: 12px;
			}

			&.right {
				text-align: right;
				padding-right: 16px;
			}
		}
	}

	.businessDialog-hide {
		position: absolute;
		margin: auto;
		background: var(--business-dialog-bgc);
		box-shadow: 0px -4px 0px 0px rgba(0, 128, 255, 1);
		border-radius: 4px;
		border-radius: 4px;
		overflow: hidden;
		animation: myscalehide 0.4s;
		transform: scale(0.6);
		opacity: 0;
	}

	/*
*	业务模块-输入框
*   <div class="businessInput">
*     <label>label</label>
*	    <el-input></el-input>
*   </div>
*/
	.businessInput {
		display: inline-flex;
		height: 32px;
		position: relative;

		label {
			white-space: nowrap;
			display: inline-block;
			width: 120px !important;
			height: 32px;
			line-height: 32px;
			text-align: left;
			background: var(--business-input-label-bgc);
			box-shadow: 0px 0px 0px 1px var(--business-input-label-border-color);
			padding-left: 8px;
			font-size: 12px;
			color: var(--business-input-label-color);
		}

		.el-input input,
		textarea {
			color: var(--business-input-text-color);
			background: var(--business-input-bgc);
			box-shadow: -1px 1px 0px 0px var(--business-input-boxshadow), 1px -1px 0px 0px var(--business-input-boxshadow);
			border: none;
			border-radius: 0;
			font-size: 12px;
		}

		.el-select {
			width: 100%;
		}

		.el-input input {
			height: 32px;
		}

		.upload-demo {
			position: absolute;
			right: 0;
		}
	}

	/*
*	业务模块-查询输入框
*	<el-input class="businessSearchInput"></el-input>
*/
	.businessSearchInput {
		width: 188px;
		height: 32px !important;
		line-height: 32px !important;

		input {
			border: 1px solid transparent;
			background: var(--business-search-input-bgc);
			border-radius: 4px !important;
			height: 32px !important;
			line-height: 32px !important;
			color: var(--business-search-input-text-color);

			&:hover {
				border: 1px solid var(--business-search-input-border-color);
			}

			&:active,
			&:focus {
				border: 1px solid var(--business-search-input-focus-border-color);

				~ .el-input-group__append {
					color: var(--business-search-input-icon-color);
				}
			}

			~ .el-input-group__append {
				border: none;
				background-color: transparent;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				color: rgba(196, 199, 204, 1);
			}
		}
	}

	/*
*	业务模块-勾选框
*   <el-checkbox class="businessCheckbox"></el-checkbox>
*/
	.businessCheckbox {
		.el-checkbox__label {
			color: var(--business-checkbox-text-color);
		}

		.el-checkbox__inner {
			background-color: var(--business-checkbox-bgc);
			border: 1px solid var(--business-checkbox-border-color);
		}
	}

	/* 动画 */
	/* 弹窗-打开 */
	@keyframes show {
		0% {
			transform: scale3d(0.5, 0.5, 0.5);
			opacity: 0;
		}

		50% {
			animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
		}

		100% {
			transform: scale3d(1, 1, 1);
			animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
			opacity: 1;
		}
	}

	/*placeholder 颜色*/
	input::-webkit-input-placeholder {
		/* WebKit browsers */
		color: var(--placeholder-color);
	}

	input:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		color: var(--placeholder-color);
	}

	input::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: var(--placeholder-color);
	}

	input:-ms-input-placeholder {
		/* Internet Explorer 10+ */
		color: var(--placeholder-color);
	}

	.diableDiv {
		background: #f5f7fa;
	}

	.el-icon-my-message {
		background: url('./assets/image/serverRoom/add.svg') center no-repeat;
	}

	.text-btn-table {
		color: #409eff !important;
	}
	.form-item-column {
		margin-bottom: 0 !important;
	}
</style>
